<template>
  <el-card>
    <el-row
      class="line-chart"
      type="flex"
      justify="space-between"
      align="middle"
    >
      <span class="title">订单处理时效<span style="font-size: 12px;margin-left: 20px;">(会员付款时间-发货时间)</span></span>
      <div>
        <el-button type="link" @click="weekstatic()">最近7天</el-button>
        <el-button type="link" @click="monthstatic()">最近30天</el-button>
        <el-date-picker
        v-model="dates"
        type="daterange"
        range-separator="To"
          start-placeholder="开始时间"
          end-placeholder="结束时间"
          placeholder="请选择日期"
          format="YYYY/MM/DD"
        value-format="YYYY-MM-DD"
        />
      </div>
    </el-row>
    <div

      id="sendorderLineEchart"
      style="width: 100%; height: 510px;margin-top:20px"
    />
  </el-card>
</template>

<script setup>
import { onMounted, onUnmounted,watch } from 'vue'
import * as echarts from 'echarts'
import {getordersendtrends } from '@/api/data'
import {showLoading,closeLoading } from '@/utils/common'

const props = defineProps({
    wareSearch: Array,
  wareList: Array,
})
import {ref, reactive } from 'vue'
let end = new Date()
let start = new Date()
const wareList = ref([])
const wid = ref('')
start.setTime(start.getTime() - 3600 * 1000 * 24 * 6)
const dates = ref([filterTime(start), filterTime(end)])
const res = {
  infor: 'true',
  date: [
  ],
  data1: [

  ],
  data2: [

  ],
  data3: [

],
data4: [

],

}
const getTrendDataInfo = async () => {
  let parmes = {
    startDate:dates.value[0],
    endDate:dates.value[1]
  }
  showLoading()
  getordersendtrends(parmes).then((result) => {
    closeLoading()
    if (result.errcode == 0) {
      let data = result.content;

      res.date = data.dates
      res.data1 = data.data1
      res.data2 = data.data2
      res.data3 = data.data3
      res.data4 = data.data4
      InitLineEachart('sendorderLineEchart', res)
    }
  });
}
getTrendDataInfo()
// const chart = ref()
// 初始化图表
let myChart = null
function InitLineEachart(ele, res) {
  var ordersArr = res.orders
  var salesArr = res.sales
  // const ordersArr_ = ordersArr.sort(SortNum)
  // const salesArr_ = salesArr.sort(SortNum)
  const option = {
    title: {
      text: '订单时效',
      show: false,
    },
    color: ['#2878FF', '#23B93C','#f3a694','#a6522c'],
    tooltip: {
      trigger: 'axis',

    },
    grid: {
      left: '1%',
      right: '3%',
      bottom: '3%',
      containLabel: true,
    },
    legend: {
      data: ['≤24小时（1天）', '≤48小时（2天）','≤72小时（3天）','>3天'],
      itemGap: 50,
    },
    xAxis: {
      type: 'category',
      boundaryGap: false,
      axisLabel: {
        color: '#676767',
        fontSize: 14,
        margin: 18,
      },
      axisTick: {
        lineStyle: {
          color: '#868686',
        },
      },
      axisLine: {
        lineStyle: {
          color: '#868686',
        },
      },
      data: res.date,
    },
    yAxis: {
    type: 'value'
  },
    series: [
      {
        name: '≤24小时（1天）',
        type: 'line',
        smooth: true,
        data: res.data1,
        tooltip: {
					valueFormatter: function (value) {
						return value + " %";
					}
				},
      },
      {
        name: '≤48小时（2天）',
        type: 'line',
        smooth: true,
        data: res.data2,
        tooltip: {
					valueFormatter: function (value) {
						return value + " %";
					}
				},
      },
      {
        name: '≤72小时（3天）',
        type: 'line',
        smooth: true,
        data: res.data3,
        tooltip: {
					valueFormatter: function (value) {
						return value + " %";
					}
				},
      },
      {
        name: '>3天',
        type: 'line',
        smooth: true,
        data: res.data4,
        tooltip: {
					valueFormatter: function (value) {
						return value + " %";
					}
				},
      },
    ],
  }
  var chartDom = document.getElementById(ele)
  myChart = echarts.init(chartDom)
  option && myChart.setOption(option)
}
watch(
  () => dates.value,
  (newValue, oldValue) => {
    getTrendDataInfo()
  }
);
const weekstatic=()=>{
      const end = new Date()
      const start = new Date()
      start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
      dates.value = [filterTime(start),filterTime(end)]
}

const monthstatic=()=>{
      const end = new Date()
      const start = new Date()
      start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
      dates.value = [filterTime(start),filterTime(end)]

}
const onResize = () => {
  // var opt = myChart.getOption()
  // myChart.clear()
  myChart && myChart.resize()
  // myChart.setOption(opt)
}
onMounted(() => {
  // InitLineEachart('sendorderLineEchart', res)
  window.addEventListener('resize', onResize)
})

onUnmounted(() => {
  window.removeEventListener('resize', onResize)
})
function filterTime(time) {
        let date = new Date(time);
        let y = date.getFullYear();
        let m = date.getMonth() + 1;
        m = m < 10 ? "0" + m : m;
        let d = date.getDate();
        d = d < 10 ? "0" + d : d;
        return y + "-" + m + "-" + d;
    }
</script>

<style lang="scss" scoped>
.line-chart {
.title {
    font-size: 18px;
    font-weight: bold;
    color: #000;
}
}
</style>
